<template>
    <nav class="home-swiper">
    <swiper :options="swiperOption" ref="mySwiper" v-if="category.length">
      <!-- 总页数 -->
      <swiper-slide v-for="(page, index) in pages" :key="index">
        <!-- 每页的图标导航 -->
        <a
          class="swiper-icon-wrapper"
          v-for="(item, index) in page"
          :key="index"
          href="item.link"
        >
          <div class="swiper-icon">
            <img :src="BASE_IMG + item.image_url" :alt="item.iconTitle" />
          </div>
          <p class="swiper-title">{{ item.title }}</p>
        </a>
      </swiper-slide>
      <!-- 分页圆点 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <img :src="HomeSwiperSvg" v-else />
  </nav>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import HomeSwiperSvg from 'assets/img/svg/home_swiper.svg'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    components: {
        swiper,
        swiperSlide
    },
    props:{
        category:Array,
    },
    data(){
        return {
            swiperOption: {
                pagination: {
                el: '.swiper-pagination'
                }
            },
            HomeSwiperSvg
        }
    },
    mounted () {
       
        
    },
    created(){
        
    },
    computed:{
        BASE_IMG() {
         return 'https://fuss10.elemecdn.com/'
        },
        pages(){
            const pages=[]
            this.category.forEach((item,index)=>{
                const page=Math.floor(index/8)
                if (!pages[page]) {
                    pages[page]=[]
                }
                pages[page].push(item)
            })
            return pages
        }
    }

}
</script>

<style lang="less" scoped>
.swiper-slide{
    
    display: flex;
    flex-wrap: wrap;
    .swiper-icon-wrapper{
        width: 25%;
        text-align: center;
        padding: 10px;
        img{
            width: 100%;
        }
        
    }
}
 

.swiper-container-horizontal > .swiper-pagination-bullets{
    bottom: -4px;
}
/deep/.swiper-pagination-bullet-active {
    background: pink;
}
</style>

